<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>新冠病毒统计</title>
    <style type="text/css">
        .top{
            position: absolute;
            line-height:20px;
            top: 0px;
            left: 0px;
            right: 0px;
            background-color: #bbb;
        }
        .main{
            position: absolute;
            top:82px;
            left:200px;
            right:0px;
            padding:10px;
            overflow-y:auto;
            bottom:0px;
            background-color: #ddd;
        }
        .left{
            position: absolute;
            width:200px;
            top: 82px;
            left:0px;
            bottom:0px;
            overflow-y: auto;
            background-color:#ccc ;
        }
    </style>
</head>
<body>
<div class="top">
    <h2 align="center" th:text="(${country}==null ? '全球':${country})+'新冠病毒感染实时统计'"></h2>
    <p align="center">北京时间：<span th:text="(${#dates.format(new java.util.Date().getTime(),'yyyy-MM-dd')})+'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp制作人: 虎~'"></span></p>
</div>
<div class="left">
    <h4>全球排行榜</h4>
    <p th:each="i,j:${who}">
        <span th:if="${j.index} le ${sum}" th:text="(${j.count})+'. '+(${countryVirusStats.get(i).getCountry()})+':'+ (${total[j.index]})"></span>
    </p>
</div>
<div class="main">
    <table class="table">
        <tr>
            <th>地区</th>
            <th>国家</th>
            <th>已感染人数</th>
            <th>新增人数</th>
        </tr>
        <tr th:each="countryVirusStats:${countryVirusStats}">
            <div th:if="${countryVirusStats.getCountry()} eq ${country} or ${country}== null ">
                <td>[(${countryVirusStats.getState()})]</td>
                <td>[(${countryVirusStats.getCountry()})]</td>
                <td>[(${countryVirusStats.getLatestTotalCases()})]</td>
                <td>[(${countryVirusStats.getDiffFromPrevDay()})]</td>
            </div>
        </tr>
    </table>
</div>
</body>
</html>